
<template>
  <view class="page-container">
    <!-- 搜索区域 -->
<!--    <view class="search-container">
      <uni-search-bar @confirm="onSearch" placeholder="搜索课程" radius="100" cancelButton="none" />
    </view> -->

    <!-- 轮播图区域 -->
    <view class="swiper-container">
      <swiper class="swiper" :indicator-dots="true" :autoplay="true" interval="3000" duration="1000">
        <swiper-item v-for="(item, index) in banners" :key="index">
          <image :src="item.imageUrl" mode="aspectFill" class="swiper-image"/>
        </swiper-item>
      </swiper>
    </view>

    <!-- 分类导航区 -->
    <view class="category-container">
      <view class="category-grid">
        <view v-for="(item, index) in categories" :key="index" class="category-item" >
			<view @tap="tocenter(item)">
				<image :src="item.imgSrc" mode="aspectFill" class="category-icon"/>
				<view class="categoryName"><text class="category-name">{{ item.categoryName }}</text> </view>
				
			</view>

        </view>
      </view>
    </view>

    <!-- 活动卡片 -->
    <view class="activity-card">
      <view class="activity-content">
        <view class="activity-text">
          <text class="activity-title">拥军优惠优惠活动</text>
          <text class="activity-desc">优惠名额有限，最高可减3000元！</text>
        </view>
        <image class="activity-image" :src="activityImage" mode="aspectFit"/>
      </view>
    </view>
<!-- 对话框的按钮 -->
	<button class="aibutten" type="primary" @click="aiChatting"></button>
    <!-- 课程列表 -->
    <view class="course-section">
      <view class="section-header">
        <text class="section-title">热门课程</text>
        <text class="section-subtitle">精品课程</text>
      </view>
      <view class="course-list">
         <view v-for="(course, index) in courses" :key="index" class="course-item" @click="isLogin(course)" > 
          <image :src="course.imgsrc" mode="aspectFill" class="course-image"/>
         
          <view class="course-info">
            <text class="course-title">{{ course.courseName }}</text>
            <text class="course-desc">{{ course.description }}</text>
            <view class="course-stats">
              <uni-icons custom-prefix="iconfont" type="eye" size="12" color="#999"/>
              <text class="view-count">{{ course.viewCount }}次观看</text>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { post1,getChapterPost,getHotCourses } from '@/pages/utils/api/clazz.js'
import { addCount } from '@/pages/utils/api/clazz.js';
const currentTab = ref('home');
import { useUserStore } from '../../stores/api';
const banners = ref([
  {
    imageUrl: 'https://ai-public.mastergo.com/ai/img_res/f403488b448047556a9d31a318ac0841.jpg'
  },
  {
    imageUrl: 'https://ai-public.mastergo.com/ai/img_res/b3ec8c1e2354d320540e6eec63b2e588.jpg'
  }
]);

const categories = ref([
  // {
  //   name: 'AI人工智能',
  //   imageUrl: 'https://ai-public.mastergo.com/ai/img_res/12045c0f8069e74e8c17403abe95c8d4.jpg'
  // },
  // {
  //   name: 'Java开发',
  //   imageUrl: 'https://ai-public.mastergo.com/ai/img_res/c4c3319efefb398447dc43e98f06109f.jpg'
  // },
  // {
  //   name: '前端开发',
  //   imageUrl: 'https://ai-public.mastergo.com/ai/img_res/b72f7ffdcf0308ff4aa28f1624e47191.jpg'
  // },
  // {
  //   name: 'Python测试',
  //   imageUrl: 'https://ai-public.mastergo.com/ai/img_res/8a764dd0539971399152b2c95121b716.jpg'
  // }
]);

const activityImage = 'https://ai-public.mastergo.com/ai/img_res/8b3f0f2440dbaa2fe038ed5744756f90.jpg';

const courses = ref([
  // {
  //   title: 'Java语言基础',
  //   description: '环境搭建，基本数据类型，变量及方法，面向对象编程',
  //   viewCount: '204389',
  //   imageUrl: 'https://ai-public.mastergo.com/ai/img_res/e0ab13f7a22863423628cc0c4a7b3ade.jpg'
  // },
  
  // {
  //   title: 'Python基础教程',
  //   description: 'Python环境配置，基础语法，函数，面向对象',
  //   viewCount: '198756',
  //   imageUrl: 'https://ai-public.mastergo.com/ai/img_res/915f36211394726d3d5293dda81aa4f1.jpg'
  // },
  // {
  //   title: 'Web前端开发',
  //   description: 'HTML5, CSS3, JavaScript基础到进阶',
  //   viewCount: '156234',
  //   imageUrl: 'https://ai-public.mastergo.com/ai/img_res/cab207e8338e28e375a320b8fc363e5d.jpg'
  // }
]);

const switchTab = (tab: string) => {
  currentTab.value = tab;
};

const onSearch = (e: any) => {
  console.log('搜索内容：', e.value);
};
// AI聊天功能
const aiChatting = () => {
	  console.log('打开AI聊天窗口');
	  // 实现AI聊天窗口的逻辑
	  uni.navigateTo({
	  	url:'/pages/ai/index'
	  })
	}
function toClass(item){
  console.log(item,"item")
  uni.navigateTo({

    url: "/pages/clazz/index?courseId="+item.courseId+"&courseName="+item.courseName+"&description="+item.description,
    fail: (err) => {
      console.log('跳转失败详情:', err);
      uni.showToast({
        title: '跳转失败: ' + err.errMsg,
        icon: 'none'
      });
    },
    success: () => {
      console.log('跳转成功');
    }
  });
}
const fetchData= async () =>{
	let data={
		parent_category_id:null,
		category_id:null
	}
      try {
        const res = await post1();
		console.log(res.data);
		initMenu(res.data)
        // this.userInfo = res.data
      } catch (error) {
        console.error('获取数据失败', error)
      }
	  try {
		
	  	const response = await getHotCourses(3);
		console.log("热门课程：",response);
		initHotCourses(response)
	  } catch (error) {
	  	//TODO handle the exception
	  }
    }
function initHotCourses(list: any){
	for(let item of list){
		// if(item.couserId  == null ){	
		// }
		console.log("item",item);
		courses.value.push(item);
	}
	
}	
function tocenter(item: any){
 console.log(item.categoryId,"item");
  uni.navigateTo({
	  // /pages/main/index
    url: "/pages/catergoryDetail/catergoryDetail?categoryId="+item.categoryId+"&categoryName="+item.categoryName,
    fail: (err) => {
      console.log('跳转失败详情:', err);
      uni.showToast({
        title: '跳转失败: ' + err.errMsg,
        icon: 'none'
      });
    },
    success: () => {
      console.log('跳转成功');
    }
  });
}
function initMenu(list: any){
	for(let item of list){
		if(item.parentCategoryId  == null ){
			categories.value.push(item);
		}
	}
	
}

function isLogin(item){
  console.log(item,"item")
    const userStore = useUserStore() 
      // 获取用户信息
      const username = userStore.getUserName;
	  add(item); //增加观看次数
	  toClass(item);
	 
  
}

const add = (item: any) => {
     console.log(item.courseId,"item-----------")
       // 点击一次增加一次观看次数
        const courseId = Number(item.courseId);
         // 构建包含数字类型的对象
          // let data = { courseId }; // 等价于 { courseId: 1 }
       // let data = {"courseId":item.courseId};
        addCount(courseId);
}

// 初始化获取数据

onMounted(()=>{
	fetchData();
})
</script>

<style>
page {
  height: 100%;
}

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background-color: #f5f6fa;
}

.search-container {
  padding: 20rpx;
  background-color: #ffffff;
}

.swiper-container {
  width: 100%;
  height: 300rpx;
  margin-bottom: 20rpx;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

.category-container {
  background-color: #ffffff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30rpx;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.category-icon {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  /* margin-bottom: 16rpx; */
}

.category-name {
  font-size: 24rpx;
  color: #333333;
  text-align: center;
}
.categoryName{
	text-align: center;
}

.activity-card {
  margin: 0 20rpx 20rpx;
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  border-radius: 16rpx;
  overflow: hidden;
}

.activity-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
}

.activity-text {
  flex: 1;
}

.activity-title {
  font-size: 32rpx;
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}

.activity-desc {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
  display: block;
}

.activity-image {
  width: 200rpx;
  height: 200rpx;
}

.course-section {
  background-color: #ffffff;
  padding: 30rpx;
  margin-bottom: 100rpx;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-right: 20rpx;
}

.section-subtitle {
  font-size: 24rpx;
  color: #999999;
}
.uni-swiper-wrapper{
	border-radius: 3%;
}
.course-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.course-item {
  display: flex;
  gap: 20rpx;
}

.course-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
}

.course-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.course-title {
  font-size: 28rpx;
  color: #333333;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.course-desc {
  font-size: 24rpx;
  color: #666666;
  margin-bottom: 10rpx;
}

.course-stats {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.view-count {
  font-size: 24rpx;
  color: #999999;
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #eeeeee;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
}

.tab-text {
  font-size: 20rpx;
  color: #999999;
}

.tab-item.active .tab-text {
  color: #2979ff;
}
.aibutten{ 
	background: url("http://172.172.9.57:9999/videos/Ai.png") no-repeat center 0px;
	background-position: center 0px;
	background-size: cover;
	width: 110rpx;
	height: 110rpx;
	border-radius: 50%;
	position: absolute;
	bottom: 7%;
	right: 9%;
}
</style>

